
import React from 'react';
import {inject, observer} from 'mobx-react';
import { WeaErrorPage, WeaTop,WeaTab,WeaRightMenu,WeaNewScroll, WeaLeftRightLayout} from 'ecCom';
import {Row,Button,Spin} from 'antd';
import LeftContainer from './myWorkPlan/leftContainer/index';
import RightContainer from './myWorkPlan/rightContainer/index';
const ButtonGroup = Button.Group;
import WorkPlanCreate from '../public/workPlanCreate/index';
import WorkPlanImport from '../public/workPlanImport/index';
import {observable,action,toJS} from 'mobx';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@inject('myWorkPlanStore')
@observer
  class AllWorkPlan extends React.Component {
  constructor(props) {
		super(props);
		this.state={
		}
	}
	/** 
	 *  hideheader=true 时隐藏top
	 *  hidesidebar=true 时隐藏左侧边栏
	 * 	workType={1,2,3} 有workType时不显示日程类型. {} 为全部类型,{1,3}为显示类型值为1，3的日程
	 *  cancreate=true  是否允许在页面新建
	*/
  componentDidMount() {
		const {status,changeTimeType,doInit} = this.props.myWorkPlanStore;
    doInit('isShare','isInit',this.props.workPlanShow);
 }
  componentWillReceiveProps(nextProps) {
		if(nextProps.location && this.props.location.key !== nextProps.location.key) {
			const {doInit,setTime4RightCon} = this.props.myWorkPlanStore;
			setTime4RightCon();
			doInit('isShare','isInit',nextProps.workPlanShow);
			
		}
	}
  componentWillUnmount() {
	  //组件卸载时一般清理一些状态
	}
	
	onCollapseFunc = (bool) => { localStorage.setItem(allworkplan_left_tree_visible, !bool); }

	setLeftRightLayout = (left, right) => {
		let fields = [];
		if(left) {
			let allworkplan_left_tree_visible = `allworkplan_left_tree_visible_${JSON.parse(localStorage.getItem('theme-account')) ? JSON.parse(localStorage.getItem('theme-account')).userid : ''}`;
			fields.push(
				<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@a41t0x@leftRight`}
					className="allworkplan-calendar-left-right-layout"
					leftWidth={221}
					leftCom={left}
					showLeft={localStorage.getItem(allworkplan_left_tree_visible) !== 'true'}
					onCollapse={this.onCollapseFunc}
				>
					{right}
				</WeaLeftRightLayout>
			);

		} else {
			fields.push(right);
		}

		return fields;
	}

	getcreateConditionParams = () => {
		return this.props.myWorkPlanStore && this.props.myWorkPlanStore.status && this.props.myWorkPlanStore.status.createConditionParams;
	}

  render() {
	let { query = false } = this.props.location;
	let {status,getRightMenu,onRightMenuClick,changeTimeType,close,onlyClose,open,importVisible,closeImport,exportExcelUrl,exportExcel,setDialogHeight,exportExcel4Html,exportListBtnTitle,time4RightCon} = this.props.myWorkPlanStore;
    const {loading,timeType,userList,createVisible,createType,workPlanId,createConditionParams,selectedUser,activeKey,spinning,workPlanShow} = toJS(status)
  let btns = query&&query.cancreate==='false' ? [
		(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@spj7ed@doImport`} type="primary" className="doImport" disabled={false} onClick={this.doImport}>{getLabel(384890,'导入日程')}</Button>),
	] : [
		(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@q0en7n@doCreate`} type="primary" disabled={false} onClick={this.doCreate}>{getLabel(18481,'新建日程')}</Button>),
		(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fetq82@doImport`} type="primary" className="doImport" disabled={false} onClick={this.doImport}>{getLabel(384890,'导入日程')}</Button>),
	];
	workPlanShow==='list' && btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vvxdsu@exportExcel`} type="primary" disabled={false} onClick={() => exportExcel('excel')}>{getLabel(28343,'导出Excel')}</Button>);	
	workPlanShow==='list' && btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4zi9xc@list`} type="primary" title={exportListBtnTitle} disabled={false} onClick={() => exportExcel('list')}>{getLabel(501903,'导出日程清单')}</Button>);	
	let buttonsCreate = [
		(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nvnya1@save`} type="primary" disabled={false} onClick={()=>{this.refs.customWorkPlanCreate.refs.workPlanCreate.returnValues()}}>{getLabel(30986,'保存')}</Button>),
		(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ca4suo@doClose`} type="primary" disabled={false} onClick={()=>{this.refs.customWorkPlanCreate.doClose()}}>{getLabel(309,'关闭')}</Button>),
	];
	let memberIDs = [{id:'3',name:'w1'}];
	memberIDs = '';
	let breadcrumb = this.getBreadcrumb();
	let collectParams={
		favname: getLabel(27910,'所有日程'),
		favouritetype: 5,
		objid: 0,
		importantlevel: 1,
	};
	setDialogHeight(0)	
    return (
    	<div className="workPlan-myWorkPlan" id="workPlan-myWorkPlan-id" style={{height: '100%'}}>
    		<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ptbwvw`} className="allWorkplan-rightMenu" datas={this.getRightMenu()} onClick={(key) =>{this.onRightMenuClick(key);} }  collectParams={collectParams}>
					<div style={{width:'100%', height: '100%'}}>
							{query.fromcard ? 
								<div style={{overflow:'hidden',height:'100%'}}>
									<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@brawoz`} className="workPlan-myWorkPlan-left-right" style={{minWidth:'1066px',height:'100%'}}>
										<RightContainer ecId={`${this && this.props && this.props.ecId || ''}_RightContainer@0fkpqw`} isAllWorkPlan = {true} query={query} hidesidebar={true}>
										</RightContainer>
									</Row>
								</div>
							: (
								<div style={{height: '100%'}}>	
									{query.hideheader !== 'true' && <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@0qnlfh`} 
										loading={spinning} 
										icon={<i className='icon-coms-schedule' />} 
										iconBgcolor='#7734FF' 
										title={getLabel(27910,'所有日程')}  
										buttons={btns}
										showDropIcon={false}
										dropMenuDatas={getRightMenu()}
										onDropMenuClick={onRightMenuClick()}
										breadcrumb={breadcrumb}
										className="allWorkplan"
									/>}
									<div style={{overflow:'hidden',height: 'calc(100% - 55px)'}}>
										<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0qkm8t`} className="workPlan-myWorkPlan-left-right" style={{minWidth:'1066px',height:'100%'}}>
											{
												this.setLeftRightLayout(
													query.hidesidebar !== 'true' && workPlanShow==='calender'&& <LeftContainer ecId={`${this && this.props && this.props.ecId || ''}_LeftContainer@nxvfcu`} />
													,
													<RightContainer ecId={`${this && this.props && this.props.ecId || ''}_RightContainer@pl3b09`} isAllWorkPlan = {true} hidesidebar={query.hidesidebar} workType={query.workType} cancreate={query.cancreate} time4RightCon={time4RightCon}>
													</RightContainer>
												)
											}
										</Row>
									</div>
								</div>
							)
							}
					</div>
				</WeaRightMenu>
				<WorkPlanCreate ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanCreate@9m8c61`}
				  type={createType}//新建为'create',查看为'preview',编辑edit,共享share
				  visible={createVisible}//显隐受控
					doClose={this.workPlanCreateClose}//关闭回调
					onlyClose={this.workPlanCreateOnlyClose}//关闭回调,只做关闭操作
					workPlanId = {workPlanId} //日程id，查看日程时用到
					createConditionParams = {this.getcreateConditionParams()}//创建的默认值日期和时间,没有传[]
					activeKey = {activeKey} //查看页面显示的面板1是基本信息，7是相关交流
					changeTab = {this.changeTab}//查看页面切换面板的回调
					selectUser = {selectedUser}//新建日程的创建人id
					workPlanTypeOptions = ''//客户模块的新建日程，普通新建传'',客户新建传3
					crmIDs = {''}//通过客户模块新建日程，并自动带出相关客户,[{'id':'','name':''}]
					description =''//客户模块需求，支持新建时传入的'基本信息-内容'


				/>
				<WorkPlanImport ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanImport@tynmqb`}
					visible = {this.props.myWorkPlanStore.importVisible}
					doClose={this.workPlanImportClose}//关闭回调
				/>
			{workPlanShow==='list' && <iframe name="exportExcel" src={exportExcelUrl} style={{display:'none'}}></iframe>}
    	</div>
    )
	}

	workPlanCreateClose = () => {
		let { close  } = this.props.myWorkPlanStore;
		close();
	}

	workPlanCreateOnlyClose = () => {
		let { onlyClose } = this.props.myWorkPlanStore;
		onlyClose();
	}

	workPlanImportClose = () => {
		let { closeImport  } = this.props.myWorkPlanStore;
		closeImport();
	}

	getBreadcrumb = ()=>{
    let {status,changeSelectedUser,doUpdateCalender} = this.props.myWorkPlanStore
		let {selectedUser,selectedUserName,workPlanShow} = toJS(status)
		let breadcrumb = [
			{
				name: workPlanShow=='calender'?getLabel(27910,'所有日程'):getLabel(33959,'日程一览表'),
				onClick: () => {changeSelectedUser('','');selectedUser=='' && doUpdateCalender(true)},
			},
		];
		
		if(workPlanShow=='calender' && selectedUserName){
			breadcrumb.push({
				name:`${selectedUserName}${getLabel(384891,'的日程')}`,
				onClick: () => doUpdateCalender(true),
			})
		}
		return breadcrumb 
	}
	changeTab = (e)=>{
		this.props.myWorkPlanStore.changeTab(e)
	}
	doCreate = ()=>{
		const {open} = this.props.myWorkPlanStore;
		let e = [];
		let date = new Date();
		let dateString = this.changeDateFormat(date);
		let timeString = date.toString().split(' ')[4].split(':',2).join(':')
		e[2] = dateString;
		e[3] = timeString;
		e[4] = dateString;
		open('create','',e);
	}
	doPreview = ()=>{
  	const {open} = this.props.myWorkPlanStore
		open('preview');
		
	}
	doImport = ()=>{
  	const {openImport} = this.props.myWorkPlanStore
		openImport();
	}
	changeDateFormat = data => {
		if(typeof(data)==='string' && data!=''){
			return data
		}
		//日期格式转为yyyy-MM-dd
		let now = data || new Date();
		let year = now.getFullYear();
		let month =(now.getMonth() + 1).toString();
		let day = (now.getDate()).toString();
		if (month.length == 1) {
			month = "0" + month;
		}
		if (day.length == 1) {
			day = "0" + day;
		}
		let dateString =  year + "-" + month + "-" + day;
		return dateString;
	}

	getRightMenu() {
		let { query = false } = this.props.location;
		let {status, exportListBtnTitle} = this.props.myWorkPlanStore;
    const {workPlanShow} = toJS(status)
		let rightBtns = [];

		query&&query.cancreate==='false' ? null : rightBtns.push({ key: "doCreate", content: getLabel(18481,'新建日程'), icon: <span className='icon-coms-New-Flow' /> })
    rightBtns.push({ key: "doImport", content: getLabel(384890,'导入日程'), icon: <span className='icon-coms-export' /> })
    workPlanShow==='list' && rightBtns.push({ key: "excel", content: getLabel(28343,'导出Excel'), icon: <span className='icon-coms-export' /> })
    workPlanShow==='list' && rightBtns.push({ key: "list",  title: exportListBtnTitle, content: getLabel(501903,'导出日程清单'), icon: <span className='icon-coms-export' /> })
    return rightBtns;
	}

	onRightMenuClick(key) {
		let {exportExcel} = this.props.myWorkPlanStore;

    if(key == 'doCreate'){
      this.doCreate();
    }else if(key == 'doImport'){
			this.doImport();
    }else if(key == 'excel'){
			exportExcel('excel')
    }else if(key == 'list'){
			exportExcel('list')
    }
	}

}

export default AllWorkPlan
